<template>
    <div class="container">
        <div class="title">中青嘉信财富</div>
        <van-form @submit="onSubmit">
            <van-cell-group>
                <van-field v-model="username" label="账号" placeholder="账号" :rules="[{ required: true, message: '请输入账号' }]" />
                <van-field type="password" v-model="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请输入密码' }]" />
            </van-cell-group>
            <div class="btn">
                <van-button :loading="isLoading" loading-text="登录中..." type="primary" native-type="submit"> 登录 </van-button>
            </div>
        </van-form>

        <div class="label" @click="$router.push('/register')">没有账号？立即注册</div>
    </div>
</template>

<script>
    import { login } from "@/api/login";
    import { Toast } from "vant";
    export default {
        data() {
            return {
                username: "",
                password: "",
                isLoading: false,
                mobile: "",
                verifyCode: "",
            };
        },
        methods: {
            async onSubmit() {
                this.isLoading = true;
                let params = {
                    username: this.username,
                    password: this.password,
                };
                let res = await login(params);
                if (res&&res.__token) {
                    localStorage.setItem("userInfo", JSON.stringify(res.userInfo));
                    localStorage.setItem("token", res.__token);
                    this.$router.push("/my");
                } else {
                    Toast(res.msg);
                }
                this.isLoading = false;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        // height: 100vh;
        padding-top: 30%;
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        ::v-deep .van-tabs__line {
            background: #1989fa;
        }
        .title {
            text-align: center;
            font-size: 30px;
            margin-bottom: 40px;
        }
        .btn {
            width: 90%;
            margin: 30px auto 20px;
            text-align: center;
            button {
                width: 100%;
                border-radius: 16px;
                font-size: 16px;
            }
        }
        .label {
            color: #dab374;
            font-size: 12px;
            text-align: right;
            padding: 0 20px;
        }
    }
</style>